<#if isMobile == false>
    <#include "../../footer_new.ftl">
	<script src="${request.contextPath}/static/plugins/layui/layui.js" charset="utf-8"></script>
</#if>
<script src="${request.contextPath}/static/js/nums.js" charset="utf-8"></script>
<script src="${request.contextPath}/static/js/gd-ui/collapse/index.js"></script>
<script src="${request.contextPath}/static/js/list/common.js"></script>
<#if isMobile == false>
	<script>
        let totalRow = ${listData.totalRow?c}
        initPagination()
        // let pageCurr = 1
        function initPagination() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'pagination', //注意，这里的 test1 是 ID，不用加 # 号
                    count: totalRow, //数据总数，从服务端得到
                    // curr: pageCurr,
                    prev: '<i class="iconfont iconicon_previous"></i>',
                    next: '<i class="iconfont iconarrowright"></i>',
                    jump: (obj, first) => {
                        if (!first) {
                            if(!gugeeGobal.isLogin) {
                                toLogin()
                                return false
                            }

                            params.page = obj.curr
                            searchUser()
                            return false
                        }
                    }
                })
            })
        }
        const filterWrap = document.getElementById('filterWrap')

        document.querySelectorAll('.ins-table th').forEach(item => {
            const sort = +(item.getAttribute('data-sort') || -1)
            if(sort === rankSort) {
                item.classList.add('is-active')
            }
        })

        if(gugeeGobal.isLogin) {
            if(gugeeGobal.roleId < 3) {
                showLock(filterWrap, {
                    roleId: 3
                })
                /*document.querySelectorAll('.td-audience').forEach(item => {
                    showLock(item, {
                        roleId: 3
                    })
                })*/
            }
        } else {
            showLock(filterWrap, {
                inner: 'Please <a href="#" onclick="toLogin()">log in</a> to use this feature.'
            })
            /*document.querySelectorAll('.td-audience').forEach(item => {
				showLock(item, {
					inner: 'Please <a href="javascript:;" onclick="toLogin()">log in</a> to use this feature.'
				})
			})*/
        }

        function showFilter(){
            const searchBg = document.getElementById('userSearch')
            if(filterWrap.toggleShow()) {
                searchBg.style.paddingBottom = 0
            } else {
                searchBg.removeAttribute('style')
            }
        }
        function changeTableSort(el, sort) {
            if(!gugeeGobal.isLogin) {
                toLogin()
                return
            }

            if(!el.classList.contains('is-active')) {
                el.parentElement.querySelector('.is-active').classList.remove('is-active')
                el.classList.add('is-active')
                rankSort = sort
                params.page = 1
                searchUser()
            }
        }
	</script>
</#if>
<script>
    let params = {
        page: 1,
        pageSize: 10
    }
    function searchFilterUser() {
        params.page = 1
        searchUser()
    }
    function searchUser() {
        let wrap
        <#if isMobile == false>
        wrap = document.querySelector('#searchTable tbody')
        <#else>
        wrap = document.querySelector('.gd-mobile-list__wrap')
        hideFilter()
        </#if>
        wrap.showLoading()
        const input = document.getElementById('insKeyword')
        params.username = (input && input.value)?input.value: undefined
        params.sort = rankSort

        visitRecord (15)
        let url
        if(gugeeGobal.isLogin) {
            url = getEncodeUrl('/ins/blogger', params)
        } else  {
            url = getEncodeUrl('/ins/blogger/search', params)
        }
        if(gugeeGobal.isMobile) {
            getList(wrap, url, list => {
                let str = ''
                list.forEach(item => {
                    str += '<a href="/instagram/influencer/' + item.username + '">' +
                            '<div class="user-item">' +
                            '<div class="user-info">' +
                            '<div class="avatar">' +
                            '<img class="head" src="' + getImage(item.picUrl, IMAGE_TYPE.BLOGGER, IMAGE_SIZE.SMALL) + '" alt="' + item.fullName + '">'
                    if(item.isVerified) {
                        str += '<img class="icon" width="16" height="16" src="/static/img/ins/Authentication.png" srcset="/static/img/ins/Authentication@2x.png 2x" alt="auth image">'
                    }
                    str += '</div>' +
                            '<div class="user-title">' +
                            '<div class="top">' +
                            '<div class="nickname">' + item.username +'</div>'
                    if(item.categoryName) {
                        str += '<div class="category">' + item.categoryName + '</div>'
                    } else if (item.overallCategoryName) {
                        str += '<div class="category">' + item.overallCategoryName + '</div>'
                    }
                    str += '</div>' +
                            '<div class="bottom">' + item.fullName + '</div>' +
                            '</div>'
                    if(item.collectId) {
                        str += '<div class="gd-popover" content="Remove from Favorite">' +
                                '<div class="icon-collect is-collect" data-collectId="' + item.collectId + '" onclick="collectUser(this, event)">' +
                                '<i class="iconfont iconquxiaoshoucang33"></i>' +
                                '</div>' +
                                '</div>'
                    } else {
                        str += '<div class="gd-popover" content="Add to Favorite">' +
                                '<div class="icon-collect" data-uid="' + item.uid + '" onclick="collectUser(this, event)">' +
                                '<i class="iconfont iconshoucang"></i>' +
                                '</div>' +
                                '</div>'
                    }
                    str += '</div>' +
                            '<div class="user-data">' +
                            '<div class="data-item">' +
                            '<div class="label">Followers</div>' +
                            '<div class="num">' + numFormat(+item.followerCount) + '</div>' +
                            '</div>' +
                            '<div class="data-item">' +
                            '<div class="label">Avg Likes</div>' +
                            '<div class="num">' + numFormat(+item.avgLike) + '</div>' +
                            '</div>' +
                            '<div class="data-item">' +
                            '<div class="label">Avg Reviews</div>' +
                            '<div class="num">'+ numFormat(+item.avgReviews) + '</div>' +
                            '</div>' +
                            '<div class="data-item">' +
                            '<div class="label">Avg ER</div>' +
                            '<div class="num">' + numFormat(+item.engagementRate*100) + '%</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</a>'
                })
                return str
            })
        } else {
            getList(wrap,url, list => {
                let str = ''
                list.forEach(item => {
                    str += '<tr>' +
                            '<td class="tb-user">' +
                            '<div class="avatar">' +
                            '<img src="' + getImage(item.picUrl, IMAGE_TYPE.BLOGGER, IMAGE_SIZE.SMALL) + '" alt="' + item.fullName + '">'
                    if(item.isVerified) {
                        str += '<img class="avatar__affix" src="/static/img/ins/Authentication.png" alt="authenticated"/>'
                    }
                    str += '</div>' +
                            '<div class="label">' +
                            '<div class="title">' + item.username
                    if(item.categoryName) {
                        str += '<div class="limit-tx">' + item.categoryName + '</div>'
                    } else if (item.overallCategoryName) {
                        str += '<div class="limit-tx">' + item.overallCategoryName + '</div>'
                    }
                    str += '</div>' +
                            '<div class="sub-title">' + item.fullName + '</div>' +
                            '</div>' +
                            '</td>' +
                            '<td>' + numFormat(+item.followerCount) + '</td>' +
                            '<td>' + numFormat(+item.avgLike) + '</td>' +
                            '<td>' + numFormat(+item.avgReviews) + '</td>' +
                            // '<td>' + numFormat(+item.followerGrowth) + '</td>' +
                            '<td>' + numFormat(+item.engagementRate*100) + '%</td>'

                    /*'<td class="td-audience">'
                    <#if login == true && user.roleId gt 1>
                        str += '<div class="tb-audience">'
                        if(item.nationDistribution && item.nationDistribution.length > 0) {
                            str += '<div class="audience-item">' +
                                    item.nationDistribution[0].property + '  ' + numFormat(+item.nationDistribution[0].value * 100) +
                                    '%</div>'
                        }
                        if(item.genderDistribution && item.genderDistribution.length > 0) {
                            str+= '<div class="audience-item">'
                            if(item.genderDistribution[0].property === 'MALE') {
                                str += '<i class="iconfont iconmale"></i>'
                            } else {
                                str += '<i class="iconfont iconfemale"></i>'
                            }
                            str += numFormat(+item.genderDistribution[0].value * 100) + '%</div>'
                        }
                        if(item.ageDistribution && item.ageDistribution.length > 0) {
                            str+= '<div class="audience-item">' +
                                    '<span>' + item.ageDistribution[0].property + '</span>' +
                                    numFormat(+item.ageDistribution[0].value * 100) + '%</div>'
                        }
                        str += '</div>'
                    <#else>
                        str += '<img class="tb-audience-img" src="${request.contextPath}/static/img/ins/Audience.png" alt="">'
                    </#if>
                    str += '</td>'*/

                    str +=  '<td>' +
                            '<div class="td-action">' +
                            '<div class="gd-popover" content="Analyze">' +
                            '<div class="blue">' +
                            '<a href="/instagram/influencer/' + item.username + '" target="_blank">' +
                            '<i class="iconfont iconxiangqing"></i>' +
                            '</a>' +
                            '</div>' +
                            '</div>'
                    if(item.collectId) {
                        str += '<div class="gd-popover" content="Remove from Favorite">' +
                                '<div class="icon-collect is-collect" data-collectId="' + item.collectId + '" onclick="collectUser(this)">' +
                                '<i class="iconfont iconquxiaoshoucang33"></i>' +
                                '</div>' +
                                '</div>'
                    } else {
                        str += '<div class="gd-popover" content="Add to Favorite">' +
                                '<div class="icon-collect" data-uid="' + item.uid + '" onclick="collectUser(this)">' +
                                '<i class="iconfont iconshoucang"></i>' +
                                '</div>' +
                                '</div>'
                    }
                    str += '</div>' +
                            '</td>' +
                            '</tr>'
                })
                return str
            })
        }
    }
    function clearParam() {
        params = {
            page: 1,
            pageSize: 10
        }
        <#if isMobile == false>
        let event = document.createEvent('Event')
        event.initEvent('click', true, true)
        document.querySelectorAll('#selectedWrap .iconfont').forEach(item => {
            item.dispatchEvent(event)
        })
        document.getElementById('insKeyword').value = ''
        searchUser()
        </#if>
    }

    function collectUser(ele, event) {
        if(!gugeeGobal.isLogin) {
            toLogin()
            event.preventDefault()
            return false
        }
        ele.showLoading()
        const popoverEle = ele.parentElement
        const isCollect = ele.classList.contains('is-collect')
        if(isCollect) {
            ele.classList.remove('is-collect')
            ele.querySelector('.iconfont').className = 'iconfont iconshoucang'
            _axios.delete('/ins/fa/blogger', {
                data: {
                    collectId: ele.getAttribute('data-collectId')
                }
            }).then(res => {
                if(res.Code === 200) {
                    ele.removeAttribute('data-collectId')
                    if(!gugeeGobal.isMobile) {
                        popoverEle.setAttribute('content', 'Add to Favorite')
                        initPopover(popoverEle)
                    }
                }
                ele.hideLoading()
            })
        } else {
            ele.classList.add('is-collect')
            ele.querySelector('.iconfont').className = 'iconfont iconquxiaoshoucang33'
            _axios.post('/ins/fa/blogger', {
                uid: ele.getAttribute('data-uid')
            }).then(res => {
                if(res.Code === 200) {
                    ele.setAttribute('data-collectId', res.Data.collectId)
                    if(!gugeeGobal.isMobile) {
                        popoverEle.setAttribute('content', 'Remove from Favorite')
                        initPopover(popoverEle)
                    }
                }
                ele.hideLoading()
            })
        }
        event && event.preventDefault()
    }
</script>
<script type="module">
    import '/static/component/search/rankSearch.js'
</script>